<template>
  <div>
    <div class="zichan-msg-1">
      <div class="zichan-msg-1-1">{{Amount}} (CC)</div>
      <div class="zichan-msg-1-2">{{props.queryCCAccount}}</div>
    </div>
    <div class="zichan-msg-2-1">
      <div class="zichan-msg-2"  @click="dialogToggle">
        {{Withdrawal}}
      </div>
    </div>
    <div class="zichan-msg-2-1-1">
      {{Deduct}}
    </div>

    <uni-popup ref="dialogMsg" type="dialog" @touchmove.stop.prevent="moveHandle" :is-mask-click="false">
      <div class="recharage-1">
        <div class="recharage-1-2">
          <div class="recharage-1-1">{{CashAmount}}</div>
        </div>

        <div  class="recharage-4-1">
          <div class="recharage-4">
            <div class="recharage-4-2">
              {{Amount}}
            </div>
            <div class="recharage-4-3">
              <el-input v-model.number="queryUSDTNum" class="recharage-4-4-1" ></el-input>
            </div>
          </div>
        </div>

        <div  class="recharage-5-1">
          <div class="recharage-5">
            <div class="recharage-5-1-1" @tap="dialogCloseBtn">
              {{cancel}}
            </div>
            <div class="recharage-5-1-2" @tap="dialogConfirmBtn">
              {{confirm}}
            </div>
          </div>
        </div>
        <div style="height: 10vw"></div>

      </div>
    </uni-popup>

  </div>
</template>
<script setup>
import { ref,defineEmits, defineProps, watch, computed, reactive,onUnmounted } from 'vue';
import {MyCC} from '@/api/zichan'
import {onShow} from "@dcloudio/uni-app";
let props = defineProps({
  queryCCAccount:{
    type:Number,
    default:0
  }
})
let emit = defineEmits(['dialogRechargeMsg'])
let queryUSDTNum = ref(null);
let query = reactive({})

let dialogMsg = ref(null);

const dialogToggle = ()=>{
  dialogMsg.value.open();
}

const moveHandle = (e) => {
  return false
}


const dialogConfirmBtn = ()=>{
  queryUSDTNum.value = queryUSDTNum.value;
  closeDialogMsg();
}
const dialogCloseBtn = ()=>{
  emit('dialogRechargeMsg')
  closeDialogMsg();
}

const closeDialogMsg=()=>{
  dialogMsg.value.close();
  queryUSDTNum.value = null;
}

let cancel = ref('取消');
let confirm = ref('确定');
let Amount = ref('金額')
let CashAmount = ref('轉入金額')
let Withdrawal = ref('提幣')
let Deduct = ref('扣除10%手续费');

onShow(()=>{
  const lang = uni.getStorageSync('LANG_KEY')
  if(lang === '中文'){
    cancel.value = '取消';
    confirm.value = '确定';
    Amount.value = '金額'
    CashAmount.value = '轉入金額'
    Withdrawal.value = '提幣'
    Deduct.value = '扣除10%手续费';
  }
  if(lang === 'Eng'){
    cancel.value = 'Cancel';
    confirm.value = 'Confirm';
    Amount.value = 'Amount'
    CashAmount.value = 'Cash Amount'
    Withdrawal.value = 'Withdrawal'
    Deduct.value = 'Deduct 10% handling fee';
  }
  if (lang === '日本語'){
    cancel.value = 'キャンセル';
    confirm.value = '確認';
    Amount.value = '金額'
    CashAmount.value = '繰り越し金額'
    Withdrawal.value = '出金'
    Deduct.value = '手数料10%控除';
  }
  if (lang === '한국어'){
    cancel.value = '취소';
    confirm.value = '확인';
    Amount.value = '수량'
    CashAmount.value = '전입 금액'
    Withdrawal.value = '출금'
    Deduct.value = '수수료 10% 를 공제 하다';
  }
})


</script>

<style scoped>
.zichan-msg-2-1-1{
  width: 90%;
  margin: 0 auto;
  padding-top: 300px;
  color: #467CD1;
  text-align: center;
  box-sizing: border-box;
}
.recharage-4-4-1{
  width: 90%;
}
:deep(.el-input__wrapper){
  background-color: #F8F8F8;
  border-radius: 2px;
  color: #FFFFFF;
  box-shadow: 0px 0px 0px 0px; /* 边框颜色 */
}
:deep(.el-input__inner){
  color: #000000;
  box-shadow: 0px 0px 0px 0px; /* 边框颜色 */
}
.recharage-1{
  width: 80vw;
  height: auto;
  margin: 0 auto;
  background: #FFFFFF;
  border-radius: 10px;
}
.recharage-1-1{
  font-size: 18px;
  font-weight: bolder;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.recharage-1-2{
  padding-top: 15px;
  box-sizing: border-box;
}
.recharage-2{
  font-size: 12px;
  width: 90%;
  margin: 0 auto;
  color: #A9A9A9;
}
.recharage-4-2{
  font-size: 16px;
  width: 90%;
  margin: 0 auto;
  color: #FFFFFF;
  padding-top: 15px;
  box-sizing: border-box;
}
.recharage-4-3{
  font-size: 16px;
  padding-top: 30px;
  box-sizing: border-box;
  text-align: center;
  color: #FFFFFF;
}
.recharage-4-4{
  font-size: 22px;
  color: #FFFFFF;
  margin: 0 10px;
}
.recharage-3{
  font-size: 12px;
  width: 90%;
  margin: 0 auto;
  color: #A9A9A9;
  height: 50px;
  line-height: 50px;
  //background: #EBEBEB;
  //border-radius: 10px;
  text-align: center;
  border-top: 1px solid #E4E4E4;
  border-bottom: 1px solid #E4E4E4;
}
.recharage-3-1{
  margin-top: 10px;
}
.recharage-4-1{
  margin-top: 20px;
  color: #FFFFFF;
}
.recharage-4{
  background-image:url("../../../static/jiaoyi/zichan/10.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  font-size: 12px;
  width: 90%;
  margin: 0 auto;
  height: 150px;
  //background: #EBEBEB;
  border-radius: 10px;
}
.recharage-5{
  display: flex;
  justify-content: space-evenly;

}
.recharage-5-1{
  margin-top: 20px;
}
.recharage-5-1-1{
  width: 43%;
  text-align: center;
  color: #000000;
  background: #EBEBEB;
  height: 45px;
  line-height: 45px;
  border-radius: 10px;
}
.recharage-5-1-2{
  color: #FFFFFF;
  text-align: center;
  width: 43%;
  background: #2A54A0;
  height: 45px;
  line-height: 45px;
  border-radius: 10px;
}
.zichan-msg-1{
  background-image: url("../../../static/jiaoyi/zichan/3.png");
  background-repeat: no-repeat; /* 背景图片是否重复 */
  background-position: center; /* 背景图片的位置 */
  background-size: cover; /* 背景图片的尺寸，cover表示覆盖整个元素，不留空白 */
  width: 90%; /* 或其他尺寸 */
  height: 18vh; /* 或其他尺寸 */
  border-radius: 10px;
  margin: 0 auto;
  color: #FFFFFF;
}
.zichan-msg-1-1{
  font-size: 16px;
  padding:30px;
  box-sizing: border-box;
}
.zichan-msg-1-2{
  font-size: 16px;
  padding-left:30px;
  box-sizing: border-box;
}
.zichan-msg-2-1{
  margin-top: 40px;
}
.zichan-msg-2{
  background-color: #FFFFFF;
  width: 90%;
  height: 45px;
  line-height: 45px;
  margin: 0 auto;
  border-radius: 10px;
  text-align: center;
  font-size: 16px;
}

</style>